/*
  学习目标：useEffect模拟卸载时
*/
import React, { useEffect, useState } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      <button onClick={() => setIsShow(!isShow)}>点我卸载</button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('窗口改变了');
  };

  // 🔔同时指定挂载和卸载
  useEffect(() => {
    // 1.挂载后开启窗口监听事件
    window.addEventListener('resize', resizeFn);

    // 💥返回的函数，就是卸载时会自动执行的钩子函数
    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  // 🔔分开指定挂载和卸载
  // useEffect(() => {
  //   window.addEventListener('resize', resizeFn);
  // }, []);

  // useEffect(() => {
  // 💥返回的函数，就是卸载时会自动执行的钩子函数
  //   return () => {
  //     window.removeEventListener('resize', resizeFn);
  //   };
  // }, []);

  return <h1>我是Child</h1>;
}
